<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年12月20日 15:10:18
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class="orderManage">
    <!-- 头部  搜索 -->
    <div class="header">
      <el-input
        v-model="value"
        style="width: 20%"
        placeholder="请输入订单编号"
      />
      <el-button icon="el-icon-search" @click="seachData">搜索</el-button>
    </div>
    <!-- 展示部分 -->
    <div class="tableContent">
      <div v-if="this.orderList.list.length == 0" style="text-align: center; margin-top: 25%">
        <span>暂无待派送订单</span>
      </div>
      <div
        v-for="(dataList, index) in orderList.list"
        :key="index"
        class="orderList"
      >
        <!-- 订单头 订单编号 完成状态 -->
        <div class="orderBasicData">
          <span style="margin-left: 2%">订单编号：{{ dataList.id }}</span>
          <span
            style="margin-left: 20%"
          >下单时间：{{ dataList.orderTime | fmtDate_global }}</span>
          <el-tag style="margin-left: 20%" type="success">{{
            dataList.status
          }}</el-tag>
        </div>
        <!-- 主要信息展示 -->
        <div
          v-for="(orderLine, index) in dataList.orderLines"
          :key="index"
          class="orderMainData"
        >
          <ul>
            <li>
              <div style="margin-top: 9%">
                <el-avatar
                  shape="square"
                  :size="140"
                  :src="orderLine.product.photo"
                />
                <!-- <img :src="orderLine.photo" alt=""> -->
              </div>
              <div>
                <span style="width: 140px; text-align: center">{{
                  orderLine.product.name
                }}</span>
              </div>
              <div>
                <span>单价:￥{{ orderLine.price }}</span>
                <!-- <span>{{totalPrice(orderLine.price)}}</span> -->
                <span>✖️ {{ orderLine.num }}</span>
              </div>
            </li>
          </ul>
          <div class="splitLine">
            <div>
              <span
                style="margin-top: 20%"
              >总额：<span style="font-size: 16px; color: red">{{
                dataList.total
              }}</span></span>
            </div>
            <div v-if="dataList.status == '待派送'">
              <el-link
                type="primary"
                @click="dispatchOrder(dataList.id)"
              >派送订单</el-link>
            </div>
            <div>
              <el-link
                type="primary"
                @click="toOrderDetails(dataList.id)"
              >订单详细</el-link>
            </div>
          </div>
        </div>
        <!-- 分割线 -->
        <!-- <div class="splitLine"> </div> -->
      </div>
    </div>
    <!-- 分页区域  -->
    <div class="pagination" />
  </div>
</template>

<script>
import orderView from '@/store/modules/orderView'
import { mapActions, mapState } from 'vuex'
import { get, post } from '@/utils/request'
import { log } from '@antv/g2plot/lib/utils'
export default {
  // 组件名称
  name: 'Demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      // 搜索字段数据
      value: ''
    }
  },
  // 计算属性
  computed: {
    ...mapState('orderView', ['orderList'])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    ...mapActions('orderView', ['getOrderDataAction']),

    getOrderListData() {
      const param = {
        page: 1,
        pageSize: 100,
        status: '待派送'
      }
      this.getOrderDataAction(param)
      // console.log(this.orderList);
    },

    toOrderDetails(id) {
      console.log(id)
      this.$router.push({
        path: '/order/order/OrderDetails',
        query: {
          id: id
        }
      })
    },

    dispatchOrder(id) {
      get('/order/delivery', {
        id: id
      }).then((res) => {
        this.$notify({
          title: '派送成功',
          message: '已派送成功',
          type: 'success'
        })
        this.getOrderListData()
      })
    },

    seachData() {
      console.log('我能进来')
      const param = {
        page: 1,
        pageSize: 100,
        id: this.value,
        status: '待派送'
      }

      this.getOrderDataAction(param)
      console.log(this.orderList)
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getOrderListData()
  },
  /**
   * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.orderBasicData {
  background-color: #f5f5f5;
  height: 40px;
}
.orderBasicData span {
  font-size: 14px;
  margin-top: 8px;
}
.orderList {
  margin-top: 10px;
  max-height: 250px;
  height: 250px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* background-color: springgreen; */
}
.orderMainData ul li {
  list-style: none;
  /* display: flex;
    flex-direction: row */
  float: left;
  margin-left: 1%;
}
.orderMainData div {
  text-align: center;
  font-size: 12px;
}
.splitLine {
  /* background-color: tomato; */
  position: absolute;
  width: 20%;
  right: 0;
  height: 210px;
  box-shadow: -2px 0px 0px 0 rgba(0, 0, 0, 0.1);
}
/* .splitLine el-divider{
  background-color: tomato;
  font-size: 200px;
} */
.splitLine div {
  display: flex;
  margin-top: 2%;
  margin-left: 5%;
}
</style>
